// 支付异常列表
<template>
    <div class=" vue-ms-main" ref="msMain">
        <div class="ms-top">
            <div class="crumbs fl">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <i class="el-icon-menu"></i>    支付异常</el-breadcrumb-item>
                    <el-breadcrumb-item>支付异常明细</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <div class="ms-doc">
            <!--  查询条件 -->
            <div class="vue_search ms-title" ref="search">
                <el-form :model="formInline" label-width="60px" class="demo-form-inline" style="margin-left: -9px;">
                    <el-form-item label="城市" prop="name" >
                        <el-select v-model="params.defCityVal" filterable placeholder="试着搜索：北京市"  @change = 'selCityWay'>
                            <el-option   v-for="item in cityData":key="item.FLD_AREACODE" :label="item.FLD_NAME"   :value="item.FLD_AREACODE"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="公司" prop="name" >
                        <el-select v-model="params.delCompanyVal" clearable filterable placeholder="试着搜索：北京市"  @change = 'selCompanWay'>
                            <el-option   v-for="item in companyData":key="item.FLD_ID" :label="item.FLD_CORPORATE_NAME"   :value="item.FLD_ID"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="路线" prop="name" >
                        <el-select v-model="params.delRouteVal" clearable filterable placeholder="试着搜索：北京市" >
                            <el-option no-data-text="请选择城市"   v-for="item in routeData":key="item.FLD_BUS_LINE_ID" :label="item.FLD_BUS_LINE_NAME"   :value="item.FLD_BUS_LINE_ID" @change = 'selRouteWay'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间" prop="name" label-width="60px" style="width: 382px">
                        <div style="position: relative;" class="search-time">
                            <b class="md"></b>
                            <el-date-picker editable = 'false' clearable = 'false' format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                            :default-time="['12:00:00', '08:00:00']"
                                            style="width: 321px !important;"
                                            v-model="params.timeData"
                                            type="datetimerange"
                                            :picker-options="pickerOptions2"
                                            range-separator=" - " start-placeholder="开始日期"
                                            end-placeholder="结束日期" align="right">

                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <div class="el-form-item"><a @click="listseachbtn" class="sm-row3">&nbsp;&nbsp;<el-button type="primary" style="">查 询</el-button></a></div>
                </el-form>
            </div>
            <template :style="dataTable">
                <el-table
                    :data="dataList"
                    :height=heightData   border header-align="center"
                    style="width: 100%">
                    <el-table-column
                        prop="FLD_CITY_NAME"  label="城市" align="center" min-width="100">
                    </el-table-column>
                    <el-table-column
                        prop="FLD_COMPANY_NAME"  label="公司" align="center" min-width="100">
                    </el-table-column>
                    <el-table-column
                        prop="FLD_BUSLINE"  label="路线" align="center" min-width="100">
                    </el-table-column>
                    <el-table-column
                        prop="FLD_BUS_ID"  label="车辆编号" align="center" min-width="100">
                    </el-table-column>
                    <el-table-column
                        prop="FLD_POSID" align="center" show-overflow-tooltip="true" label="设备编号">
                    </el-table-column>
                    <el-table-column :formatter="dateFormat"
                        show-overflow-tooltip="true" align="center"  prop="FLD_STARTTIME" label="出现时间" min-width="100">
                    </el-table-column>
                </el-table>
            </template>
            <div class="pagination">
                <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="params.page"   :page-sizes="[10, 20, 30, 40,50]"
                                :page-size="params.size"  layout="total, sizes, prev, pager, next, jumper" :total="totalRecord">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    const insurance = require( '../../../api/insurance');        //   接口js引用
    export default {
        //  数据
        data() {
            return {
                heightData:'500',
                cityData: [],        // 城市数据列表
                defCityValStu:true,
                companyData:[],     // 公司数据列表
                routeData: [],      // 路线数据列表
                // 时间插件数据
                pickerOptions2: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6
                    },
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                fullscreenLoading: true,    // 数据未加载完成实行动画
                dataTable:'',
                screenHeight: document.body.clientHeight-360,   //减去header的60px
                totalRecord:0,  //  总记录数
                dataList:[],
                params:{
                    page:1,     //  当前页
                    size:10,    //  每页行数
                    defCityVal: undefined,     // 默认选中城市
                    delCompanyVal:undefined,  // 公司默认选中
                    delRouteVal:undefined,    // 默认选中路线
                    timeData:[],
                },
            }
        },
        methods: {
            // 查询
            listseachbtn(){
                this.pubLicListWap();
            },

            //  每页行数 选择事件
            handleSizeChange(val) {
                this.params.size = val;        // 分页参数 每页行数 （赋值全局变量）
                this.pubLicListWap();  // 调用公共列表方法
            },

            // 当前页数 点击事件
            handleCurrentChange(val) {
                this.params.page  = val;    // 分页参数 当前页数 （赋值全局变量）
                this.pubLicListWap();     // 调用公共列表方法
            },

            //  公共刚加载方法
            pubLicListWap:function () {
                var that = this;
                that.defCityValStu = false;
                // 开始时间与结束时间处理
                var d1 = undefined;
                var d2 = undefined;
                if(that.params.timeData != undefined && that.params.timeData != ','){
                    d1 = new Date(that.params.timeData[0]);
                    var startTime = d1.getFullYear() + '-' + (d1.getMonth() + 1) + '-' + d1.getDate() + ' ' + d1.getHours() + ':' + d1.getMinutes() + ':' + d1.getSeconds();
                    d2 = new Date(that.params.timeData[1]);
                    var endTime = d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-' + d2.getDate() + ' ' + d2.getHours() + ':' + d2.getMinutes() + ':' + d2.getSeconds();
                }
                // 列表请求
                var params = 'FLD_CTIYCODE='+that.params.defCityVal+'&FLD_COMPANYID='+that.params.delCompanyVal+'&FLD_BUSLINE='+that.params.delRouteVal+'&FLD_ERROR_CODE=0&FLD_STARTTIME='+startTime+'&FLD_ENDTIME='+endTime+'&PAGEINDEX='+that.params.page+'&PAGESIZE='+that.params.size;
                $.ajax({
                    url:insurance.posturl+"PosData/GetPayErrorListByDetPage?"+params,
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            if(data.data != ''){
                                that.dataList = JSON.parse(data.data);
                                that.totalRecord = data.total;
                            }else{
                                that.dataList = null;
                                that.totalRecord = 0;
                            }
                        }else{
                            that.$message.error(data.msg);
                            this.$router.push('/userlogin');
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('发生错误'+jqXHR.status);
                    }
                });
            },

            // -----------------------  获取数据 方法 ---------------------
            // 城市选择
            selCityWay(){
                if(this.params.defCityVal != '' || this.params.defCityVal != undefined){
                    this.getCompanyData(this.params.defCityVal);
                    if(this.defCityValStu){  // 第一次加载时调用
                        this.pubLicListWap();   // 获取列表信息
                    }
                    this.companyData = [];
                    this.routeData = [];
                    this.params.delCompanyVal = undefined;
                    this.params.delRouteVal = undefined;
                }else{
                    this.routeData = [];
                }
            },

            // 公司选择
            selCompanWay(){
                if(this.params.delCompanyVal != '' || this.params.delCompanyVal != undefined){
                    this.getRoteData(this.params.delCompanyVal);
                }else{
                    this.companyData = [];
                    this.params.delRouteVal = undefined;
                }
            },
            // 路线选择
            selRouteWay(){
                this.pubLicListWap();   // 获取列表信息
            },
            // 获取城市列表
            getCityData(){
                var that = this;
                $.ajax({
                    url:insurance.posturl+"SysInfo/GetCityList?str=0",
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            that.cityData = JSON.parse(data.data);
                            var userCity = localStorage.setItem('ms_usercity',data.data.FLD_FLEET_ID);
                            if(userCity != null || userCity != undefined){
                                that.params.defCityVal = localStorage.setItem('ms_usercity',data.data.FLD_FLEET_ID);
                            }else{
                                that.params.defCityVal = that.cityData[0].FLD_AREACODE;
                            }
                        }else{
                            // that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('获取数据超时');
                    }
                });
            },

            // 获取公司 -- 根据城市id
            getCompanyData(citycod){
                var that = this;
                $.ajax({
                    url:insurance.posturl+"SysInfo/GetCompanyList?FLD_CITY_CODE="+citycod,
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            that.companyData = JSON.parse(data.data);
                        //    that.params.delCompanyVal = that.companyData[0].FLD_ID;
                        //     that.params.delCompanyVal = '';
                        }else{
                            // that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('获取数据超时');
                    }
                });
            },

            // 获取路线 -- 根据公司id
            getRoteData(compancod){
                var that = this;
                $.ajax({
                    url:insurance.posturl+"SysInfo/GetLineList?FLD_COMPANY_ID="+compancod,
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            that.routeData = JSON.parse(data.data);
                         //   that.params.delRouteVal = that.routeData[0].FLD_BUS_LINE_ID;
                        }else{
                            // that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('发生错误'+jqXHR.status);
                    }
                });
            },

            // 数据加载中
            openFullScreen(datatime) {
                this.fullscreenLoading = true;
                setTimeout(() => {
                    this.fullscreenLoading = false;
                }, datatime);
            },
            //时间格式化
            dateFormat:function(row, column) {
                var date = row[column.property];
                var d = date.replace('T',' ');
                if (date == undefined) {
                    return "";
                }else{
                    return d;
                }
            },
        },
        mounted () {
            var t = new Date;
            this.params.timeData =  [new Date(t.getFullYear(), t.getMonth(), t.getDate()-1, t.getHours(), t.getMinutes()), new Date(t.getFullYear(), t.getMonth(), t.getDate(), t.getHours(), t.getMinutes())];
            this.openFullScreen(500);
            this.getCityData();     // 获取城市信息
            //this.pubLicListWap();   // 获取列表信息
            this.screenHeight = `${document.documentElement.clientHeight}`;
            this.dataTable = {'height':this.screenHeight-360+'px'};
            this.heightData = this.screenHeight-380;
        },

    }
</script>
<style src="../../../../static/css/datasource.css"></style>
<style src="../../../../static/css/common.css"></style>
<style>
    /*.el-table{overflow-y: scroll;}*/
    .no-data {font-size: 50px; text-align: center;  margin: 50px;color: #d0d0d0;}
    .search-time {position: relative;}
    .search-time .el-icon-time{left: 0px !important;}
    .search-time .el-input__inner{padding-left:35px; padding-right: 0px;}
    .search-time .md{position: absolute; background: transparent; z-index: 999; width: 50px; height: 100%; top: 0px; left: 0px;}
    .vue-ms-main .ms-title{padding: 25px 0px 2px 0px; border: 0px solid #d8d8d8 !important;}
    .el-table__body-wrapper table{ margin-bottom: 41px;}
    .el-table__body-wrapper{ overflow-y: scroll;overflow-x: hidden;}
    .el-table__body-wrapper::-webkit-scrollbar,.el-table::-webkit-scrollbar {width:2px;height:10px;}
    .el-table__body-wrapper::-webkit-scrollbar-button ,.el-table::-webkit-scrollbar-button{background-color:transparent;}
    .el-table__body-wrapper::-webkit-scrollbar-track,.el-table::-webkit-scrollbar-track{background:transparent;}
    .el-table__body-wrapper::-webkit-scrollbar-track-piece,.el-table::-webkit-scrollbar-track-piece{background:transparent;}
    .el-table__body-wrapper::-webkit-scrollbar-thumb,.el-table::-webkit-scrollbar-thumb{background:rgb(0, 128, 192);border-radius:4px;}
    .el-table__body-wrapper::-webkit-scrollbar-corner,.el-table::-webkit-scrollbar-corner{background:#82AFFF;}
    .slide-fade-enter-active {transition: all 1.3s ease;}
    .slide-fade-leave-active {transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
    .slide-fade-enter, .slide-fade-leave-active {transform: translateX(40%);opacity: 0;}
</style>
